<template>
    <div class="content">
        <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                服务态度：
            </div>
            <div class="col-md-2">
                <el-rate v-model="callbackData.callbackService" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>
            </div>
            <div class="col-md-1 col-md-offset-3" style="padding:0;font-weight:700">
                时间：
            </div>
            <div class="col-md-5">
                {{getDate()}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                工作速度：
            </div>
            <div class="col-md-2">
                <el-rate v-model="callbackData.callbackSpeed" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                完成质量：
            </div>
            <div class="col-md-2">
                <el-rate v-model="callbackData.callbackQuality" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                描述：
            </div>
            <div class="col-md-9">
                <textarea class="form-control" rows="3" placeholder="Enter ..." v-model="callbackData.callbackDesc" maxlength="80"></textarea>
            </div>
        </div>
        <div class="row" style="margin-top:100px">
            <div class="col-md-1 col-md-offset-4">
                <button type="button" class="btn btn-block btn-primary" @click="getEventCallback">提交</button>
            </div>

        </div>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    props: ["formList"],

    data() {
        return {
            callbackData: {
                orderId: "",
                callbackService: null,
                callbackSpeed: null,
                callbackQuality: null,
                callbackDesc: "",
            },
            value1: null,
            value2: null,
            value3: null
        };
    },
    methods: {
        getEventCallback() {
            this.callbackData.orderId = this.formList.orderId;
            this.$api.ticket.list.eventCallback(this.callbackData).then(res => {
                if (res.success) {
                    console.log(this.callbackData)
                    console.log(res);
                    this.formList.orderStatus = res.data;
                    this.$$message({
                        message: "恭喜您，回访成功！",
                        type: "success"
                    });
                    this.$parent.$refs.detailmsgComp.getEventWorkinfo();
                    this.$parent.$refs.detailmsgComp.$parent.getSelEventId();
                    this.$emit("isActive");
                }
                else {
                    this.$$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            });
        },
        getDate() {
            return utils.getDate();
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  .row {
    margin: 17px 0;
  }
  .col-md-1 {
    text-align: right;
    height: 32px;
    line-height: 32px;
  }
  .col-md-5 {
    height: 32px;
    line-height: 32px;
    color: #b2afb3;
  }
  select {
    width: 200px;
    height: 32px;
    line-height: 32px;
    padding-top: 4px;
    color: #b2afb3;
    border-radius: 5px;
  }
  .el-rate {
    padding: 6px 0;
  }
}
</style>
